<!--
 * @Author: 购物车
 * @Date: 2020-06-28 12:26:37
 * @LastEditTime: 2020-07-07 14:30:12
 * @LastEditors: Please set LastEditors
--> 
<template>
  <div class="shopCart">
    <!--头部导航栏-->
    <div class="navBar">
      <van-nav-bar title="我的购物车">
        <template #right>
          <router-link to="/message">
            <div class="msg">
              <van-icon name="chat-o" size="24" badge="2" class="icon" color="#232333" />
            </div>
          </router-link>
        </template>
      </van-nav-bar>
    </div>
    <!--商品滑动单元格-->
    <div class="swipeCell">
      <template v-if="goodsList.length === 0 || goodsList === []">
        <div class="noGoods">
          <van-sticky :offset-top="250">
            <p class="text">暂无商品</p>
          </van-sticky>
        </div>
      </template>
      <template v-else>
        <van-swipe-cell class="box" v-for="(item,idx) of goodsList" :key="item.id">
          <div class="goods-card">
            <!--单选选按钮-->
            <input
              type="checkbox"
              class="checked"
              @change="itemCheck()"
              v-model="isChecked"
              :value="item"
            />
            <van-image class="img" :src="item.goods.goods_thumb" />
            <div class="center">
              <div class="name">{{item.goods.goods_name}}</div>
              <div class="type">{{item.attr_info}}</div>
              <div class="bottom">
                <p class="price">{{item.price_original|rmb}}</p>
                <div class="num">
                  <van-stepper integer v-model="item.goods_number" />
                </div>
              </div>
            </div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              @click="removeGoods(idx)"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </template>
    </div>
    <!--底部提交菜单-->
    <div class="submitBar">
      <van-submit-bar :price="getSum()" button-text="去结算" @submit="onSubmit">
        <!--全选按钮-->
        <input type="checkbox" @change="selectedAll" v-model="isAllCheck" />全选
      </van-submit-bar>
    </div>
    <!--底部导航-->
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import * as api from "@/api/apiList/cart/cart.js"; //购物车列表
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("cartModule");
export default {
  data() {
    return {
      isAllCheck: false, //全选按钮
      isChecked: [], //商品单选按钮
      goodsList: [] //s购物车商品列表
    };
  },
  methods: {
    ...mapMutations(["GET_IsChecked"]),
    //获取商品列表请求
    async API_cart(goods_id) {
      let params = {
        goods_id
      };
      return await api.cart(params);
    },
    // 删除商品请求
    async API_cartDel(id) {
      return api.cart_del(id);
    },

    //点击删除按钮
    removeGoods(idx) {
      this.$dialog
        .confirm({
          title: "删除商品",
          message: "是否确认删除"
        })
        .then(async () => {
          await this.API_cartDel(this.goodsList[idx].id);
          console.log(this.goodsList[idx].id);
          //调用请求商品的列表数据
          this.goodsData();
        })
        .catch(() => {
          // on cancel
        });
    },
    //执行请求商品的列表数据
    async goodsData() {
      let res = await this.API_cart();
      if (res.data.code === 200) {
        console.log(res.data.data);
        this.goodsList = res.data.data;
      }
    },
    //点击支付跳转到订单
    onSubmit() {
      if (
        (this.goodsList.length > 0 && this.isAllCheck == true) ||
        this.isChecked.length > 0
      ) {
        //传递勾选的商品
        this.GET_IsChecked(this.isChecked);
        console.log(this.isChecked);
        this.$router.push("/order");
      } else {
        this.$dialog.alert({
          message: "购物车无商品或者无勾选商品"
        });
      }
    },
    //计算总价钱
    getSum() {
      var sum = 0;
      for (var i in this.isChecked) {
        sum +=
          this.isChecked[i].price_original * this.isChecked[i].goods_number;
      }
      return sum * 100;
    },
    //购物车全选按钮
    selectedAll() {
      console.log(this.isAllCheck);
      if (this.isAllCheck) {
        //全选中
        this.isChecked = this.goodsList;
      } else {
        //全不选中
        this.isChecked = [];
      }
    },
    //单选
    itemCheck() {
      console.log(this.isChecked);
      if (this.isChecked.length === this.goodsList.length) {
        //全选chekcbox勾上
        this.isAllCheck = true;
      } else {
        //反选
        this.isAllCheck = false;
      }
    }
  },
  activated() {
    this.goodsData();
  }
};
</script>

<style lang="scss" scoped>
.shopCart {
  padding-bottom: 50px;
  /*商品滑动单元格*/
  .swipeCell {
    margin-top: 10px;

    .noGoods {
      display: inline-block;
      text-align: center;
      .text {
        font-size: 30px;
      }
    }
    .box {
      .goods-card {
        margin: 0;
        background-color: white;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ccc;
        .checked {
          margin-top: 50px;
        }
        .img {
          width: 80px;
          height: 80px;
          margin-top: 10px;
          // margin-left: 20px;
        }
        .center {
          width: 250px;
          // border: 1px solid black;

          .name {
            width: 200px;
            margin-top: 10px;
            margin-bottom: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            //  border: 1px solid black;
          }
          .type {
            color: #ccc;
          }
          .bottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 8px;
            // border: 1px solid black;

            .price {
              // width: 60px;
              margin-left: -30px;
              color: red;
            }
          }
        }
        //   .stepper {
        //     display: flex;
        //     justify-content: space-around;
        //     align-items: center;
        //     margin-top: 60px;
        //   }
      }

      .delete-button {
        height: 100%;
      }
    }
  }
  /*底部提交菜单*/
  .submitBar {
    .van-submit-bar {
      bottom: 50px;
      .van-button--round {
        border-radius: 0;
      }
    }
  }
}
</style>